.btn{
      background: none;
      padding: 6px 5px;
      border: none;
      color: aqua;
      background: #333;
      border-radius: 5px;
}

// .btn-gray-1{
//       background: darken(#ddd,0);
// }

// @for 

$btn-count :0;

// @for $btn-count from 1 to 10 {
//       .btn-gray-#{$btn-count}{
//             background: darken(#ddd,($btn_count - 1) * 10);
//       }
// }   

@while $btn-count < 9 {
      $btn-count :  $btn-count + 1;
      .btn-gray-#{$btn-count}{
            background: darken(#ddd,($btn_count - 1) * 10);
      }
}


// @each => 已经有数据但是未知次数的循环;
// index => index(list,value) 返回当前的下标;

$btn-color-list : (#f10 ) (orange) (yellow) (green) (cyan);

@each $color in $btn-color-list {
      
      .btn-mycolor-#{index($btn-color-list , $color)}{
            background: nth($color,1);
      }   
}
